<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机抽奖</title>
    <style>
        /* 页面样式 */
        body {
          font-family: Arial, sans-serif;
          text-align: center;
          margin: 50px 0;
        }

        #users {
           margin: 20px;
        }

        #lottery-container {
          margin-top: 30px;
        }

        button {
          width: 100px;
          height: 30px
        }

        #lottery-result {
          font-size: 36px;
          font-weight: bold;
          margin-top: 20px;
          height: 48px; /* 设置固定高度 */
          overflow: hidden; /* 隐藏超出的部分 */
        }

        .flip-animation {
          animation: flipText 3s linear infinite; /* 3秒文字翻滚动画 */
        }

        @keyframes flipText {
          0% {
            transform: rotateX(0deg); /* 初始位置 */
          }
          50% {
            transform: rotateX(90deg); /* 翻转到90度 */
          }
          100% {
            transform: rotateX(0deg); /* 回到初始位置 */
          }
        }
    </style>
</head>
<body>
<h1>随机抽奖</h1>
<div id="lottery-container">
    <div id="users"></div>
    <!-- 抽奖按钮 -->
    <button onclick="drawLottery()">抽奖</button>
    <div id="lottery-result"></div>
</div>

<script src="script.js"></script>
</body>
</html>